<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>for loop</title>
		<script src="../assets/js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<ul>
				<li v-for="item, index in items" :key="index">
					{{index}}：{{item.name}}
				</li>
			</ul>
			<!-- 用of替代in，对于对象遍历，可以有三个参数分别表示对象的值，对象属性和下标 -->
			<ul>
				<li v-for="item, key, index of itemObj" :key='key'>
					{{index}}：{{key}}---------{{item}}
				</li>
			</ul>
			<ul>
				<li v-for="item, index in items">
					<!-- 可以获取到父级作用于的属性 -->
					{{parentMessage}}----{{index}}：{{item.name}}
				</li>
			</ul>
			<!-- 数组数据更新方法：
				变异方法：会改变原来数组的长度，内容
					push(),pop(),shift(),unshift(),splice(),sort(),reverse() 
				非变异方法：会返回一个新的数组
					filter(),concat(),slice()
			-->
		</div>
		<script src="../assets/js/for.js"></script>
	</body>
</html>
<!-- v-for在渲染列表的时候默认使用就地更新策略，
		如果数据的顺序被改变，VUE不会移动DOM元素来匹配数据项的顺序，而是就地更新每个元素。
		并且确保他们在每个索引的位置正确渲染。
	 模式是高效的，只适用于不依赖子组件状态或临时DOM状态（如表单输入值）的列表渲染
	 为了给VUE一个提示，以便于跟踪每个节点的身份，从而重用和重新排序，为每个项提供一个唯一key
	 尽量v-for和key组合使用，并且key使用字符串或者数值类型
	 使用v-bind指令绑定key关键字， -->
	 
	 
<!-- VUE不能检测利用索引直接设置一个数组项和值机而修改数组长度的操作
		vm.items[1] = 2;
		vm.items.length = 1000;
	 建议使用Vue.set和arr.splice()
		Vue.set(vm.items, indexOfItem, newValue);或vm.$set(vm.items, indexOfItem, newValue);
		vm.items.splice(indexOfItem, 1, newValue);-->
<!-- vue 不能检测对象属性的添加或者删除：
		vm.a=2;// 因为之前没有a属性，新增的属性js检测不到
	但是可以使用Vue.set/vm.$set(object, propertiseName, value);方法向嵌套对象添加响应式属性-->
	 
